<template>
  <view class="container">
    <u-form :model="formData" ref="data" :rules="rules1" label-width="130" class="t_form">
      <u-form-item label="联系人" prop="name" :border-bottom="false">
        <u-input v-model="formData.name" :border="true" placeholder="请输入联系人" />
      </u-form-item>
      <u-form-item label="手机号" prop="phone" :border-bottom="false">
        <u-input v-model="formData.phone" :border="true" placeholder="请输入手机号" />
      </u-form-item>
      <u-form-item label="地区信息" prop="region" :border-bottom="false">
        <u-input v-model="formData.region" :border="true" placeholder="请选择地区" disabled @click='show = true' />
      </u-form-item>
      <u-form-item label="详细地址" prop="content" :border-bottom="false">
        <u-input type="textarea" v-model="formData.content" :border="true" placeholder="请输入详细地址" />
      </u-form-item>
    </u-form>
    <view @click="submit1" class="button">提交</view>
    <!-- 选择地区返回的值 -->
    <u-picker mode="region" v-model="show" @confirm="confirm"></u-picker>
    <!-- 验证码 -->
  </view>
</template>

<script setup>
  import {
    reactive,
    ref
  } from 'vue'
  import {
    onReady
  } from '@dcloudio/uni-app';
  import ui from '@/utils/index.js'
  const data = ref(null)
  const show = ref(false)
  const formData = reactive({
    name: '',
    phone: '',
    region: '',
    content: ''
  })
  const rules1 = reactive({
    phone: [{
        required: true,
        message: '请输入手机号',
        trigger: ['change', 'blur'],
      },
      {
        // 自定义验证函数，见上说明
        validator: (rule, value, callback) => {
          return /^1[3-9]\d{9}$/.test(value)
        },
        message: '手机号码不正确',
        // 触发器可以同时用blur和change
        trigger: ['change', 'blur'],
      }
    ],
    name: [{
      required: true,
      message: '请输入联系人',
      trigger: ['change', 'blur'],
    }],
    region: [{
      required: true,
      message: '地区信息不能为空',
      trigger: ['change', 'blur'],
    }]
  })
  onReady(() => {
    data.value.setRules(rules1);
  })
  // 提交表单
  const submit1 = () => {
    data.value.validate().then(res => {
      console.log('表单数据信息：', res);
    }).catch(err => {
      console.log('表单错误信息：', err);
    })
  }
  // 选择地区的回调
  const confirm = (e) => {
    console.log(e, 'e');
    formData.region = e.province['name'] + e.city['name'] + e.area['name']
  }
</script>

<style lang="scss">
  .container {
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    background-color: #fff;
  }
  .t_form {
    // padding: 20rpx 30rpx;
    // box-sizing: border-box;
    // background-color: #fff;
  }

  .button {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 100rpx;
    background-color: #7F7F7F;
    color: #fff;
    font-size: 30rpx;
    line-height: 100rpx;
    text-align: center;
  }
</style>